<template>
    <div class="meeting-form">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 培训管理</el-breadcrumb-item>
                <el-breadcrumb-item v-if="isNew">会议添加</el-breadcrumb-item>
                <el-breadcrumb-item v-if="!isNew">会议编辑</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form size="mini" ref="ruleForm" :model="form" :rules="rules" label-width="110px">
            <el-form-item label="会议名称" prop="meetingname">
                <el-input v-model="form.meetingname" placeholder="请输入会议名称"></el-input>
            </el-form-item>
            <el-form-item label="会议类型" prop="meetingtype">
                <el-select v-model="form.meetingtype" placeholder="请选择会议类型" style="width: 100%;">
                    <el-option v-for="item in meetingtypeOption"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="会议链接" prop="meetinglink">
                <el-select v-model="form.meetinglink" filterable placeholder="请选择对应的文章作为跳转" style="width: 100%;">
                    <el-option v-for="item in meetinglinkOptions"
                               :key="item.artid"
                               :label="item.arttitle"
                               :value="item.artid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户价格" prop="usercost">
                <el-input-number v-model="form.usercost" :min="0" label="用户报名价格"></el-input-number>
            </el-form-item>
            <el-form-item label="会议时间" prop="meetingtime">
                <el-date-picker v-model="form.meetingtime"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="请选择会议时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="会员价格" prop="membercost">
                <el-input-number v-model="form.membercost" :min="0" label="会员报名价格"></el-input-number>
            </el-form-item>
            <el-form-item label="会议注释" prop="meetingcomment">
                <el-input type="textarea"
                          :rows="5"
                          placeholder="请输入内容"
                          v-model="form.meetingcomment">
                </el-input>
            </el-form-item>
            <el-form-item>
                <div class="fixed-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                    <el-button @click="goBack">取消</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>

  export default {
    data: function () {
      return {
        isNew: false,
        meetingtypeOption: [{
          value: '会议信息',
          label: '会议信息'
        }, {
          value: '培训信息',
          label: '培训信息'
        }],
        meetinglinkOptions: [],
        form: {
          meetingid: '',        //会议id
          meetingname: '',      //会议名称
          meetingtype: '',      //会议类型
          meetingcomment: '',   //会议注释
          meetinglink: '',   //会议链接
          usercost: '',      //用户价格
          membercost: '',    //会员价格
          meetingtime: '',   //会议时间
        },
        rules: {
          meetingname: [
            {required: true, message: '请输入会议名称', trigger: 'blur'}
          ],
          meetingtype: [
            {required: true, message: '请选择会议类型', trigger: 'blur'}
          ],
          meetinglink: [
            {required: true, message: '请选择会议链接', trigger: 'blur'}
          ],
          usercost: [
            {required: true, message: '请输入用户价格', trigger: 'blur'}
          ],
          membercost: [
            {required: true, message: '请输入会员价格', trigger: 'blur'}
          ],
          meetingtime: [
            {required: true, message: '请选择会议时间', trigger: 'blur'}
          ],
          meetingcomment: [
            {required: false, message: '请输入会议注释', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      submitForm(ruleForm) {
        var self = this;
        self.$refs[ruleForm].validate((valid) => {
          if (valid) {
            var url = '';
            if (self.$route.path == '/meeting_add/') {    //新增
              url='/meeting/add';
            } else {      //编辑
              url = '/meeting/edit';
            }
            self.$axios.post(url, self.form)
              .then(function (res) {
                if (res.data.code == 0) {
                  self.$message.info(res.data.message);
                  self.goBack()
                } else {
                  self.$message.error(res.data.message);
                }
              })
              .catch(function (err) {
                self.$message.error('请求网络失败，请稍后再试！');
              })
          } else {
            return false;
          }
        })
      },
      goBack() {
        this.$router.go(-1);
      },
      //页面初始化
      getMeeting(meetingid) {
        var self = this
        self.$axios.post('/meeting/getmeetinginfo', {
          meetingid: meetingid
        }).then(function (res) {
          if (res.data.code == 0) {
            // console.log(res.data);
            self.form = res.data.data
            self.form.meetingtime = self.$moment(self.form.meetingtime).format('YYYY-MM-DD HH:mm:ss')
          } else {
            self.$message.error(res.data.message);
          }
        }).catch((err) => {
          self.$message.error('请求网络失败，请稍后再试！');
        })
      },
      getMeetingLink() {
        let self = this
        self.$axios.post('/art/getArticleList_byparentid', {
          page: 1,
          pagerow: 999999,
          arttype: 'cat5767355338'  //指定栏目类型(会议与培训的栏目id)
        }).then(function (res) {
          if (res.data.code == 0) {
            self.meetinglinkOptions = res.data.data;
          } else {
            self.$message.error('获取会议链接列表失败');
          }
        }).catch((err) => {
          self.$message.error('请求网络失败，请稍后再试！');
        })
      }
    },
    created() {
      if (this.$route.path == '/meeting_add/') { //新增
        this.form.meetingid = 'mid' + Math.round(Math.random() * 100000000)
        this.isNew = true;
        this.getMeetingLink()
      } else {        //编辑
        this.isNew = false;
        this.getMeeting(this.$route.query.meetingid)
        this.getMeetingLink()
      }
    }
  }
</script>

<style scoped>
    .meeting-form {
        width: 80%;
    }

    .meeting-form form {
        margin-top: 60px;
    }

    .fixed-btn {
        position: fixed;
        z-index: 9999999;
        padding: 10px 30px;
        text-align: right;
        right: 0;
        bottom: 0;
        background: none;
        margin-bottom: 0;
    }
</style>
